<template>
    <div class="classify">
        <div class="item" v-for="ele in classify" :key="ele">
            <div class="img"><img :src="ele.s_goods[0].s_goods_photos[0].path" ></div>
            <p>{{ele.name}}</p>
        </div>
    </div>
</template>

<script setup>
import {ref} from 'vue'
    let classify = ref([])
    let url = 'http://shop.bluej.cn/api/classify/classifyGoods?project_id=241'
    fetch(url).then(res=>res.json()).then(res=>{classify.value = res.result;console.log(res);})
</script>

<style lang="scss" scoped>
    .classify{
        margin: auto;
        width: 3.6rem;
    }
    .classify .item{
        display: inline-block;
        overflow: hidden;
        width: 0.72rem;
        height: 0.79rem;
    }
    .classify .item .img{
        margin: auto;
        margin-top: 0.08rem;
        margin-bottom: 0.06rem;
        width: 0.4rem;
        height: 0.4rem;
        border-radius: 0.2rem;
    }
    .classify .img>img{
        display: block;
        width: 100%;
        height: 100%;
    }
    .classify .item p{
        text-align: center;
    }
</style>